<template>
	<view class="custom_popup" :class="{ popup_show: showPopup }">
		<view class="popup_mask" @click="showPopup = false"></view>
		<view class="popup_content">
			<text class="popup_share_title">{{title}}</text>
			<scroll-view scroll-y="true" class="schoolList" @scrolltolower="scroll">
				<cardBox :dataList="dataList" :title="'绑卡'" @jiebang="jiebang" @jumpCard="jumpCard"></cardBox>
			</scroll-view>
			<view class="popup_share_btn">
				<text class="" @click="showPopup = false;selectName=''">取消</text>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title11" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<mcModal :isShow="showMcModal2" :type="'password'" :showCancel="true" :placeholder="'请输入密码'" :inp="true" :content="content2" :title="title2" @cancel="cancel2" @ok='queren2'></mcModal>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {
		queryOrg,
		bindEmp,
		openStudentMike
	} from '../../common/api/index.js'
	import {_showToast, _showLoading} from '../../common/js/util.js'
	import cardBox from '../card-box1.vue'
	import mcModal from '../custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	/**
	 * @Author: NXJ
	 */
	export default {
		name: 'CustomTabs',
		props: {
			value: {
				type: [Boolean, String],
				default: false
			},
			title: {
				type: String,
				default: '请选择'
			},
			dataList: {
				type: Array,
				default: () => []
			},
			orgId: {
				type: String
			},
			milk: {
				type: [Boolean, String],
				default: false
			},
			activeIndex: {
				type: Number,
				default: 0
			}
		},
		components: {
			cardBox,
			mcModal,
			tmcModal
		},
		data() {
			return {
				showPopup: false,
				popupTitle: '请选择',
				popupList: [],
				cardNo1: '',
				isSwitch: false,
				showMcModal: false,
				content: '',
				title11: '',
				okBtn: '',
				showMcModal2: false,
				showMcModal1: false,
				content1: '',
				title1: '',
				content2: '',
				title2: ''
			};
		},
		watch: {
			value(newVal) {
				this.showPopup = newVal
			},
			title(newTitle) {
				this.popupTitle = newTitle
			},
			showPopup(newVal){
				this.$emit("input",newVal);
			},
		},
		methods: {
			cc() {
				this.showMcModal = false
				if(this.isSwitch) {
					uni.reLaunch({
						url: '/pageMilk/index/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/me/paySetting'
					})
				}
			},
			bb() {
				this.showMcModal = false
				uni.reLaunch({
					url: '/pageMilk/index/index'
				})
			},
			cancel() {},
			queren() {
				this.showMcModal1 = false
			},
			cancel2() {
				this.showMcModal2 = false
			},
			queren2(value) {
				this.showMcModal2 = false
				// this.$emit('emitQue', value)
				let s_userId = uni.getStorageSync('s_userId')
				_showLoading('绑定中,请稍后...')
				if(this.milk){
					openStudentMike({
						orgId: this.orgId,
						cardNo: this.cardNo1,
						userId: s_userId,
						cardPwd: value,
						bindType: this.activeIndex == 0 ? 0 : 1
					}).then(res => {
						if(res.code == 0) {
							uni.hideLoading()
							// if(this.activeIndex == 0) {
							// 	// this.title11 = '绑卡成功'
							// 	// this.content = '请设置支付密码'
							// 	// this.isSwitch = false
							// 	// this.okBtn = '前往设置'
							// 	// this.showMcModal = true
							// 	this.title = '温馨提示'
							// 	this.content = '绑卡成功'
							// 	this.okBtn = '确认'
							// 	this.isSwitch = true
							// 	this.showMcModal = true
							// } else {
								this.title11 = '温馨提示'
								this.content = '绑卡成功'
								this.isSwitch = true
								this.okBtn = '确认'
								this.showMcModal = true
							// }
						} else {
							uni.hideLoading()
							this.title1 = '操作失败'
							this.content1 = res.msg
							this.showMcModal1 = true
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}else{
					bindEmp({
						orgId: this.orgId,
						cardNo: this.cardNo1,
						userId: s_userId,
						cardPwd: value,
						bindType: this.activeIndex == 0 ? 0 : 1
					}).then(res => {
						if(res.resultCode == 0) {
							uni.hideLoading()
							// if(this.activeIndex == 0) {
							// 	this.title11 = '绑卡成功'
							// 	this.content = '请设置支付密码'
							// 	this.isSwitch = false
							// 	this.okBtn = '前往设置'
							// 	this.showMcModal = true
							// } else {
								this.title11 = '温馨提示'
								this.content = '绑卡成功'
								this.isSwitch = true
								this.okBtn = '确认'
								this.showMcModal = true
							// }
						} else {
							uni.hideLoading()
							this.title1 = '操作失败'
							this.content1 = res.resultMsg
							this.showMcModal1 = true
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
			},
			jiebang(value) {
				if(this.cardNo1 == undefined) {
					uni.showToast({
						title: '请选择卡号'
					})
				} else {
					this.content2 = 'xxxxx'
					this.title2 = '请输入卡密码完成绑定'
					this.showMcModal2 = true
				}
			},
			jumpCard(cardNo) {
				this.cardNo1 = cardNo
				this.$emit("getCardNo", this.cardNo1);
			},
			scroll() {
				
			}
			
		}
	}
</script>

<style lang="scss">
	.custom_popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 199;
		display: none;
		&.popup_show{
			display: block;
		}
		.popup_mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}

		.popup_content {
			height: 90%;
			width: 100%;
			display: flex;
			position: absolute;
			bottom: 0;
			flex-direction: column;
			background-color: #FFF;
			border-top-right-radius: 36upx;
			border-top-left-radius: 36upx;
		}

		.schoolList {
			width: 100%;
			height: calc(100% - 100px);
			.no-content{
				padding: 100rpx 24rpx;
				text-align: center;
				color: #999;
				font-size: $font-size-base;
			}
		}

		.item {
			padding: 0 24upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.popup_share_btn,
		.popup_share_title {
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bolder;
			border-bottom: 1px #f5f5f5 solid;
			text-align: center;
			color: #333;
		}

		.popup_share_btn {
			display: flex;
			justify-content: space-around;
			color: #007AFF;
			border: none;
			border-top: 1px #f5f5f5 solid;
			position: absolute;
			bottom: 0;
			width: 100%;

			text {
				width: 50%;
			}
		}
	}
</style>
